<template>
<!-- E chart绘制 -->
  <div :class="className" :style="{height: height,width: width}"></div>
</template>

<script>
import {debounce} from "../utils/utils";

export default {
  name: "SwitchChart",
  props:{
    className:{
      type:String,
      default:'chart'
    },
    width:{
      type:String,
      default: '100%'
    },
    height:{
      type:String,
      default:'500px'
    },
    autoResize:{
      type:Boolean,
      default:true
    },
    type:{
      type:String,
      default:'paper',
      required:true
    }
  },
  data(){
    return{
      //图表对象
      chart:null,
      //侧边栏
      sideBarElm:null,
      //图标数据
      chartData:{
        weekday:[],
        recentData:[],
      },
      isShow:true,
    }
  },
  watch:{
    type:{
      handler(n,o){
        this.type=n
        this.initChart()
      }
    }
  },

  mounted() {
    this.initChart()
    //监听侧边栏
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }

    // 监听侧边栏的变化
    this.sidebarElm = document.getElementsByClassName('sidebar	container')[0]
    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },

  //移除监听器
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

    this.chart.dispose()
    this.chart = null
  },

  methods:{
    /*
    监听处理
     */
    sidebarResizeHandler(e){
      if(e.propertyName==='width'){
        this.__resizeHandler()
      }
    },

    /*
      设置
     */
    setOptions({ weekday,recentData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {

        },
        xAxis: {
          type: 'category',
          data: this.chartData.weekday,
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis:[{
          type: 'value',
          name: '数量',
          yAxisIndex: 0,
          axisLabel: {
            formatter: '{value}',
          },
        }],

        series: [
          {
            name: '',
            type: 'bar',
            data: this.chartData.recentData,
            itemStyle: {
              color : '#00BFFF'
            }
          }
        ]
      })
    },

    /*
      初始化图标
     */
    initChart(){
      this.$axios.get(`/statics/${this.type}`).then(res=>{
        this.chartData={
          weekday:res.data.data.date,
          recentData: res.data.data.recentData,
        }
        if(this.isShow){
          this.chartData.weekday.push('总计')
          this.chartData.recentData.push({
            value:res.data.data.historyData,
            itemStyle:{
              color:'#a90000'
            }
          })
        }
        if(this.chart!==null&&this.chart!==''&&this.chart!==undefined){
          this.chart.dispose()
        }
        this.chart = this.$echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      }).catch(failRes=>console.log(failRes))
    },

    /*
      显示/隐藏
     */
    switchState(status){
      this.isShow=status
      this.initChart()
    }
  }
}
</script>

<style scoped>

</style>
